<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="row" style="margin-top: 30px" id="app">
        <div class="col-md-8 col-md-offset-2">
            <h3>员工管理系统</h3>
            <button type="button" class="btn btn-primary" @click="showEdit()"
                    data-toggle="modal" data-target="#myModal">新增</button>

            <button type="button" class="btn btn-danger" @click="deleteAll">删除</button>
            <div>
                <div class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="empname"
                                   placeholder="请输入员工姓名">
                        </div>
                    </div>
                    <button class="btn btn-primary" @click="pageFun(1)">查询</button>
                </div>
            </div>
            <table class="table table-bordered table-striped">
                <tr>
                    <th>
                        <input type="checkbox" v-model="checkAll" @input="changeCheckAll">
                    </th>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>所在部门</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in empList" :key="index">
                    <td><input type="checkbox" v-model="item.checkOne"
                               @input="changeCheckOne(item)"></td>
                    <td>{{index + 1}}</td>
                    <td>{{item.empName}}</td>
                    <td>{{item.gender == '1' ? '男' : '女'}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.tbDept ? item.tbDept.deptName : ''}}</td>
                    <td>
                        <button type="button" class="btn btn-warning" @click="showEdit(item)"
                                data-toggle="modal" data-target="#myModal">
                            编辑
                        </button>
                        <button type="button" class="btn btn-danger"
                                @click="deleteEmp(item.empId)">
                            删除
                        </button>
                    </td>
                </tr>
            </table>
            <!--底部页码信息和分页-->
            <div class="row">
                <div class="col-md-6">
                    当前第{{pageNum}}页，共{{pageNums}}页，一共有{{total}}条数据
                </div>
                <div class="col-md-6">
                    <!--分页组件-->
                    <nav aria-label="Page navigation"
                         style="margin-top: -27px; float: right;">
                        <ul class="pagination">
                            <li :class="{disabled:pageNum == 1}" @click="pageFun(1)">
                                <a>首页</a>
                            </li>
                            <!--上一页,不等于第一页的时候展示-->
                            <li v-show="hasPreviousPage" @click="pageFun(pageNum-=1)">
                                <a aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <!--循环的每一页-->
                            <li v-for="page in pageList" :key="page" @click="pageFun(page)"
                                :class="{active:pageNum == page}">
                                <a>{{page}}</a>
                            </li>
                            <!--下一页，有下一页时展示-->
                            <li v-show="hasNextPage" @click="pageFun(pageNum+=1)">
                                <a aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <!--尾页-->
                            <li @click="pageFun(pageNums)" :class="{disabled:pageNum == pageNums}">
                                <a>尾页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!--弹出框-->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
            <div class="modal-dialog modal-lg modal-content" role="document">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑</h4>
                </div>
                <div class="modal-body" style="padding: 20px">
                    <div>
                        <div class="form-group">
                            <label>姓名</label>
                            <input v-model="rowEmp.empName" class="form-control" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <div>
                                <label class="radio-inline">
                                    <input v-model="rowEmp.gender" type="radio" name="inlineRadioOptions" value="1"> 男
                                </label>
                                <label class="radio-inline">
                                    <input v-model="rowEmp.gender" type="radio" name="inlineRadioOptions" value="2"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input v-model="rowEmp.email" class="form-control" type="text" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                            <label>部门</label>
                            <select class="form-control" v-model="rowEmp.dId">
                                <option v-for="item in deptList" :key="item.deptId"
                                        :value="item.deptId">
                                    {{item.deptName}}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">关闭</button>
                    <button type="button" class="btn btn-primary" @click="saveEmpForm">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 添加vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- 添加axios请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!--js逻辑-->
    <script>
        const http = axios.create({
            baseURL: '/ssmcrud',
        });
        // 添加响应拦截器
        http.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            return response.data;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });

        new Vue({
            el: '#app',
            data: {
                empList: [],
                pageList: [],
                total:0, // 数据总条数
                pageNums:0, // 总分页数
                hasNextPage:false, // 是否有下一页
                hasPreviousPage:false, // 是否有上一页
                pageNum:1, // 默认请求第几页
                empname:"", // 查询员工姓名
                rowEmp:{}, // 表单信息
                deptList:[], // 所有部门
                checkAll: false // 全选
            },
            mounted: function () {
                this.getEmpList()
                this.getDeptList()
            },
            methods: {
                // 查询所有的部门
                getDeptList(){
                    http.get("/getDeptList").then(res=>{
                        this.deptList = res.data.deptList
                    })
                },
                // 分页方法
                pageFun(page){
                    this.pageNum = page
                    this.getEmpList()
                },
                // 查询数据方法
                getEmpList: function () {
                    http.get(`/getEmpList/${this.pageNum}/${this.empname}`).then(res=>{
                        console.log(res)
                        this.empList = res.data.empList.list
                        this.pageList = res.data.empList.navigatepageNums
                        this.total = res.data.empList.total
                        this.pageNums = res.data.empList.pages
                        this.hasNextPage = res.data.empList.hasNextPage
                        this.hasPreviousPage = res.data.empList.hasPreviousPage
                    })
                },
                // 删除
                deleteEmp(id){
                    http.delete(`/deleteEmp/${id}`).then(res=>{
                        this.pageNum = 1
                        this.getEmpList()
                    })
                },
                // 显示弹框
                showEdit(row){
                    this.rowEmp = row || {}
                },
                // 保存表单信息
                saveEmpForm(){
                    http.post("/andOrUpdateEmp",this.rowEmp).then(res=>{
                        // 请求成功后关闭弹框
                        $("#closeBtn").click()
                        // 刷新数据
                        this.pageNum = 1
                        this.getEmpList()
                    })
                },
                // 切换全选
                changeCheckAll(statu){
                    let checked = statu.target.checked
                    this.empList.forEach(item=>{
                        item.checkOne = checked
                    })
                    this.selectRow = this.empList.filter(item=>item.checkOne)
                },
                changeCheckOne(){
                    if(this.empList.every(item=>item.checkOne)){
                        this.checkAll = true
                    }else{
                        this.checkAll = false
                    }
                    this.selectRow = this.empList.filter(item=>item.checkOne)
                },
                deleteAll(){
                    http.post("/deleteEmpByIds",{
                        ids:this.selectRow.map(item=>item.empId)
                    }).then(res=>{
                        this.pageNum = 1
                        this.getEmpList()
                    })
                }
            }
        })
    </script>
</body>
</html>